<template>
  <div class="stu">
    <h6><p>学员管理</p></h6>
    <Mysearch
      @searchFun="searchFun"
      @resetData="resetData"
      @showDialog="showDialog"
    />
    <Mylist
      :stdarr="stdarr"
      @delEvent="initGetStudent"
      @editOpenDialog="editOpenDialog"
    />
    <MybatchDel :checkflag="checkflag" :pageSize="pageSize" />
    <MyPageTool
      @changepageSize="changepageSize"
      @changepage="changepage"
      :page="page"
      :pageSize="pageSize"
      :total="total"
    />
    <MyDialog
      v-if="show"
      :row="row"
      :btnType="btnType"
      @closeDialog="closeDialog"
      @resettable="initGetStudent"
    />
  </div>
</template>

<script>
import Mysearch from "./components/Mysearch.vue";
import Mylist from "./components/Mylist.vue";
import MybatchDel from "./components/MybatchDel.vue";
import MyPageTool from "./components/MyPageTool.vue";
import MyDialog from "./components/MyDialog.vue";

// 引入请求函数，可引入多个，方便之后增删改
import { getStudentApi } from "@/api/studentApi";
export default {
  components: { Mysearch, MybatchDel, Mylist, MyDialog, MyPageTool },
  data() {
    return {
      // 列表存储数据
      stdarr: [],

      // 查询的关键词
      keyword: "",
      startTime: "",
      endTime: "",

      // 分页器的数据
      page: 1,
      pageSize: 10,
      pageSizes: [5, 12, 20, 50, 100],
      total: 100,

      // dialog显示隐藏变量
      show: false,

      //编辑保存的数据
      row: "",

      // 开关变量
      btnType: 0, //0添加 1编辑

      // 全选框变量
      checkflag: true,
    };
  },
  mounted() {
    this.initGetStudent();
  },
  methods: {
    initGetStudent() {
      // 发送请求获取数据
      getStudentApi({
        keyword: this.keyword,
        startTime: this.startTime,
        endTime: this.endTime,
        page: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        // console.log(res)
        if (res.code == 200) {
          this.stdarr = res.data;
          this.total = res.total;
        }
      });
    },
    // 查询函数
    searchFun(val) {
      this.keyword = val.search;
      this.startTime = val.startTime;
      this.endTime = val.endTime;
      console.log("查询参数", val);
      this.initGetStudent();
    },
    // 重置按钮
    resetData(val) {
      this.keyword = val;
      this.searchFun(val);
    },
    // 控制每页显示多少数据
    changepageSize(val) {
      this.pageSize = val;
      this.initGetStudent();
    },
    // 控制初始也码
    changepage(val) {
      this.page = val;
      this.initGetStudent();
    },
    // 添加第一步 打开弹框
    showDialog() {
      this.row = {}; //点添加时，清除编辑传进去的数据缓存
      this.show = true;
      this.btnType = 0; //显示添加title
    },
    // 关闭弹窗
    closeDialog() {
      this.show = false;
    },
    // 编辑数据
    editOpenDialog(val) {
      this.row = val;
      this.btnType = 1; //显示编辑title
      this.show = true;
    },
  },
};
</script>

<style lang="less" scoped>
h6 {
  height: 40px;
  color: #333;
  // margin: 0px 0px 20px 0px;
  padding-top: 20px;
  padding-left: 20px;

  background: #fff;
  p {
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    text-align: left;
    text-indent: 14px;
    border-left: 6px solid #438afe;
  }
}
.stu {
  position: relative;
}
// /deep/.el-container .el-main {
//   padding: 0 10px 20px 10px;
// }
</style>